/*
1、基于某个元素，固定显示在相对元素的某个位置 上下左右 start end
2、跟谁元素滚动
*/
<template>
  <div class="rx-absolute"  :rx-placement="placement" :class="{active:active}">
    <div class="rx-absolute-content rx-arrow-content" :class="{'no-arrow':!hasArrow}">
      <div class="rx-arrow hollow" v-if="hasArrow"></div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import {triggerOnce as eventTriggerOnce} from '../../../rxtools/src/brower/event'
export default {
  name: "rx-absolute",
  data() {
    return { active: false };
  },
  props: {
    placement: '',
    offset: {
      //偏移
      type: Object,
      default() {
        return {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        };
      }
    },
    hasArrow:{//是否显示小角 默认不显示
    	type:Boolean,
    	default:false
    }
  },
  watch:{
    active(val){
      if(!val){
        this.removeEventTriggerOnce();
        this.removeEventTriggerOnce=null;
        this.$emit('onHide');
      } else {
        this.$emit('onShow', this.$el);
      }
    }
  },
  methods: {
    /**
     * @param {Elment} triggerEL 父元素DOM
     * @param {ev} 父元素事件源
     */
    toggle(triggerEL,ev) {
      var contentEl = this.$el;
      if(contentEl.contains(ev.target)){
        return;
      }

      this.active = !this.active;
      if(this.active){
         this.removeEventTriggerOnce = eventTriggerOnce(triggerEL,()=>{
            this.active=false;
        })
      }
    },
    hide(){
        this.active = false;
    },
    show(){
      if(!this.active){
         this.active=true;
      }
    }
  }
};
</script>
<style lang="scss">
@import "./arrow.scss";

.rx-absolute {
  position: absolute;
  z-index: 2;
  display: none;
  &.active {
    display: block;
  }
  &[rx-placement='bottom']{
    top: 100%;
  }
  &[rx-placement='bottom-start']{
    top: 100%;
    left: 0;
  }
  &[rx-placement='bottom-end']{
    top: 100%;
    right: 0;

    .rx-arrow.hollow::after{
      right: -5px;
    }
  }
  &[rx-placement='top']{
    top: 0;
     transform: translate(100%,-100%);
  }
   &[rx-placement='top-start']{
    top: 0;
    left: 0;
    transform: translate(100%,-100%);
  }
  &[rx-placement='top-end']{
    top: 0;
    right: 0;
    transform: translate(0,-100%);

    .rx-arrow.hollow::after{
      right: -5px;
    }
  }
}
</style>
